<!-- 图表组件 -->
<template>
    <view class="chart_content_item">
        <LEchart ref="chartRef"></LEchart>
    </view>
</template>

<script lang="ts" setup>
import LEchart from "@/packagePcoCheck/components/l-echart/l-echart.vue"
import { ref, onMounted, watch } from "vue"
// #ifdef H5
import * as echarts from 'echarts'
// #endif
// #ifdef MP-WEIXIN
const echarts = require('../../static/echarts.min.js')
// #endif
const chartRef = ref()
const props = defineProps({
    option: {
        type: Object
    }
})
onMounted(() => {
    setTimeout(() => {
        if (!chartRef.value) return
        chartRef.value.init(echarts, chart => {
            chart.setOption(props.option)
        })
    }, 300)
})
watch(() => props.option, (newVal, oldVal) => {
    if (chartRef.value) {
        chartRef.value.init(echarts, chart => {
            chart.setOption(newVal)
        })
    }
}, { deep: true, immediate: true })
</script>

<style lang="scss" scoped>
.chart_content_item {
	width: 100%;
	height: 100%;
}
</style>